<template>
  <div class="dashboard-container">
    <!-- 动态背景 -->
    <div class="background-animation">
      <canvas ref="canvas" class="canvas"></canvas>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper"> <!-- Handles overall page structure -->
      <!-- 标题 -->
      <div class="title">智慧商业管理系统</div>

      <!-- 定位和垂直居中导航卡片的容器 -->
      <div class="nav-cards-wrapper">
        <!-- 主导航卡片 -->
        <div class="nav-cards">
          <div class="nav-card" @click="navigateTo('/store-dashboard-hub')" @mouseenter="animateCard" @mouseleave="resetCard">
            <div class="icon-container">
              <el-icon class="nav-icon"><DataLine /></el-icon>
            </div>
            <div class="card-title">店铺状态总览</div>
          </div>

          <div class="nav-card" @click="navigateTo('/sales/orders')" @mouseenter="animateCard" @mouseleave="resetCard">
            <div class="icon-container">
              <el-icon class="nav-icon"><Document /></el-icon>
            </div>
            <div class="card-title">订单管理</div>
          </div>

          <div class="nav-card" @click="navigateTo('/rfm-analysis')" @mouseenter="animateCard" @mouseleave="resetCard">
            <div class="icon-container">
              <el-icon class="nav-icon"><PieChart /></el-icon>
            </div>
            <div class="card-title">客户行为分析</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { DataLine, Document, PieChart } from '@element-plus/icons-vue';

const router = useRouter();
const canvas = ref(null);
let animationFrame = null;

// 导航到指定路由
const navigateTo = (path) => {
  router.push(path);
};

// 卡片悬停动画
const animateCard = (event) => {
  const card = event.currentTarget;
  card.style.transform = 'translateY(-10px)';
  card.style.boxShadow = '0 15px 30px rgba(0, 115, 255, 0.3)';
  card.style.borderColor = 'rgba(0, 149, 255, 0.8)';
};

// 重置卡片样式
const resetCard = (event) => {
  const card = event.currentTarget;
  card.style.transform = 'translateY(0)';
  card.style.boxShadow = '0 10px 20px rgba(0, 52, 128, 0.2)';
  card.style.borderColor = 'rgba(65, 105, 225, 0.3)';
};

// 绘制连接点和线的动画背景
const initCanvas = () => {
  if (!canvas.value) return;
  
  const ctx = canvas.value.getContext('2d');
  const particles = [];
  const particleCount = 100;
  let width, height;

  // 调整画布大小
  const resizeCanvas = () => {
    if (!canvas.value) return;
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.value.width = width;
    canvas.value.height = height;
  };

  // 创建粒子
  const createParticles = () => {
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: Math.random() * 0.5 - 0.25,
        vy: Math.random() * 0.5 - 0.25,
        radius: Math.random() * 2 + 1,
        color: 'rgba(65, 105, 225, ' + (Math.random() * 0.5 + 0.25) + ')'
      });
    }
  };

  // 绘制粒子
  const drawParticles = () => {
    ctx.clearRect(0, 0, width, height);

    // 更新和绘制每个粒子
    particles.forEach(particle => {
      particle.x += particle.vx;
      particle.y += particle.vy;

      // 边界检查
      if (particle.x < 0 || particle.x > width) particle.vx = -particle.vx;
      if (particle.y < 0 || particle.y > height) particle.vy = -particle.vy;

      // 绘制粒子
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
      ctx.fillStyle = particle.color;
      ctx.fill();
    });

    // 绘制连接线
    ctx.beginPath();
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x;
        const dy = particles[i].y - particles[j].y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < 150) {
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
        }
      }
    }
    ctx.strokeStyle = 'rgba(65, 105, 225, 0.1)';
    ctx.lineWidth = 0.5;
    ctx.stroke();

    animationFrame = requestAnimationFrame(drawParticles);
  };

  // 初始化
  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  createParticles();
  drawParticles();
};

onMounted(() => {
  initCanvas();
});

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame);
  }
  window.removeEventListener('resize', resizeCanvas);
});
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: #0d1117;
  color: white;
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.canvas {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  z-index: 1;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}

.title {
  font-size: 3rem;
  font-weight: bold;
  margin-top: 8vh;
  /* margin-bottom: 2rem; */
  text-align: center;
  background: linear-gradient(45deg, #4169e1, #00bfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 15px rgba(65, 105, 225, 0.5);
  letter-spacing: 2px;
  flex-shrink: 0;
}

.nav-cards-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  position: relative;
  top: -5rem;
}

.nav-cards {
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  flex-wrap: nowrap;
  z-index: 1;
}

.nav-card {
  width: 220px;
  height: 220px;
  background-color: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(65, 105, 225, 0.3);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 20px rgba(0, 52, 128, 0.2);
  padding: 1.5rem;
  box-sizing: border-box;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.nav-icon {
  font-size: 2.5rem;
  color: white;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: white;
  text-align: center;
}

.nav-card:active {
  transform: scale(0.95);
}
</style> 